<template>
  <div>
    <!--条件搜索区域-->
    <el-row>
      <el-col :span="24">
        <el-card header=" ">
          <span class="header2">用户列表</span>
          <el-form :inline="true" style="text-align: center;">
            <el-form-item label="用户名称：">
              <el-input
                  v-model="searchuser.userName"
                  placeholder="请输入用户名"
                  clearable>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <!--数据显示区域-->
    <el-row>
      <el-col :span="24">
        <el-card>
          <!-- 新增按钮 -->
          <el-header style="background-color: #ffffff; margin-left: -5px">
            <el-button @click="handleSave()" icon="el-icon-circle-plus-outline">新增用户</el-button>
          </el-header>
          <!-- 用户详细信息 -->
          <el-table :data="userData" style="width: 100%">
            <el-table-column
                width="280"
                prop="id"
                label="ID">
            </el-table-column>
            <el-table-column
                prop="name"
                label="用户名称">
            </el-table-column>
            <el-table-column
                prop="password"
                label="密码">
            </el-table-column>
            <el-table-column
                prop="role"
                label="用户权限">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                    style="margin: 0 0 0 0"
                    icon="el-icon-setting"
                    size="mini"
                    type="warning"
                    @click="setDialog(scope.row.id,scope.row.name,scope.row.password,scope.row.role,scope.row.address)"
                    slot="reference">编辑
                </el-button>
                <el-popconfirm :title="('确定删除 '+ scope.row.name +' 吗？')" @confirm="remove(scope.row.name)">
                  <el-button
                      style="margin: 0 0 0 15px"
                      icon="el-icon-close"
                      size="mini"
                      type="danger"
                      slot="reference">删除
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!--分页-->
    <el-row class="page-row">
      <el-pagination
          class="el-pagination"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 30, 50, 200]"
          @size-change="sizeChange"
          @current-change="currentChange"
          @prev-click="currentChange"
          @next-click="currentChange"
          :current-page="current"
          :page-size="size"
          :total="total">
      </el-pagination>
    </el-row>

    <!-- 添加 -->
    <el-dialog title="添加用户" :visible.sync="saveDialog" width="600px">
      <el-form :model="userObj" ref="ruleForm" label-width="80px">
        <el-form-item label="用户名称" prop="name" :rules="[{ required: true, message: '名称不能为空'}]">
          <el-input v-model="userObj.name" maxlength="8" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '密码不能为空'}]">
          <el-input v-model.number="userObj.password"></el-input>
        </el-form-item>
        <el-form-item label="角色权限" prop="role">
          <el-input v-model="userObj.role" show-word-limit></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 255px; margin: 45px 0 0 65px" @click="userAdd"
                     :disabled="userObj.name===''||userObj.password===''"
          >立即添加
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑 -->
    <el-dialog title="编辑用户" :visible.sync="updateDialog" width="600px">
      <el-form :model="userSet" ref="ruleForm" label-width="80px">
        <el-form-item label="用户ID" prop="id">
          <el-input v-model="userSet.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户名称" prop="name" :rules="[{ required: true, message: '名称不能为空'}]">
          <el-input v-model="userSet.name" maxlength="8" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '名称不能为空'}]">
          <el-input v-model.number="userSet.password"></el-input>
        </el-form-item>
        <el-form-item label="角色权限" prop="role">
          <el-input v-model="userSet.role" show-word-limit></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 255px; margin: 45px 0 0 65px" @click="updateuser"
                     :disabled="userSet.name===''||userSet.password===''"
          >确定修改
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import userApi from "@/assets/api/userApi";
export default {
  data() {
    return {
      adminName: "",
      // 搜索条件对象
      searchuser: {
        userName: '',
      },
      // 用户数据 (页面初始化时会将数据传进来)
      userData: [],
      size: 5, // 每页的数据大小
      current: 1, //当前页数
      total: 0, // 总数量
      // 新增用户
      saveDialog: false,  // 是否显示
      // 添加的用户对象
      userObj: {
        name: '',
        password: '',
        role: '',
      },
      // 编辑用户
      updateDialog: false,  // 是否显示
      // 编辑的用户对象
      userSet: {
        id: null,
        name: '',
        password: '',
        role: ''
      },
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 添加框
    handleSave() {
      this.saveDialog = true
    },
    // 编辑框
    setDialog(id, name, password, role) {
      this.userSet.id = id
      this.userSet.name = name
      this.userSet.password = password
      this.userSet.role = role
      this.updateDialog = true
    },
    // 删除
    remove(name) {
      userApi.deleteUser({name: name }).then(r => {
        if (r.data.code === 200) {
          this.$message.success(r.data.message)
          this.getData()
        }else {
          this.$message.error(r.data.message)
        }
      })
    },
    // 立即添加
    userAdd() {
      userApi.addUser({
        name: this.userObj.name,
        password: this.userObj.password,
        role: this.userObj.role
      }).then(r => {
        if (r.data.code === 200) {
          this.$message.success(r.data.message)
          this.saveDialog = false
          this.getData()
          this.userObj.name = ''
          this.userObj.password = ''
          this.userObj.role = ''
        }else {
          this.$message.error(r.data.message)
        }
      })
    },
    // 更新用户信息
    updateuser() {
      userApi.updateUser({
        id: this.userSet.id,
        name: this.userSet.name,
        password: this.userSet.password,
        role: this.userSet.role
      }).then(r => {
        if (r.data.code === 200) {
          this.$message.success(r.data.message)
          this.updateDialog = false
          this.getData()
          this.userSet.id = null
          this.userSet.name = ''
          this.userSet.password = ''
          this.userSet.role = ''
        }else {
          this.$message.error(r.data.message)
        }
      })
    },
    // 每页大小修改
    sizeChange(val) {
      this.size = val
      if(this.searchuser.userName !== ''){
        this.search()
      }else {
        this.getData()
      }
    },
    // 根据搜索条件查询
    search() {
      if(this.searchuser.userName !== ''){
        this.getData()
      }else {
        this.$message.error("搜索的用户名不能为空")
        this.getData()
      }
    },
    // 第几页
    currentChange(val) {
      this.current = val
      if(this.searchuser.userName !== ''){
        this.search()
      }else {
        this.getData()
      }
    },
    // 获取数据，并赋值给userData
    getData() {
      userApi.getUserList({
        name: this.searchuser.userName,
        current: this.current,
        size: this.size
      }).then(r => {
        this.userData = r.data.data.userPage.records
        this.total = r.data.data.userPage.total
      }).catch(error => {
        this.$message.error("未登录")
        this.$router.push("/login")
      })
    },
  }
}
</script>

<style>
@import "../assets/css/user.css";
</style>